List Builder FieldsStatic Image Properties
Description
Settings to configure a Static Image field in a List.
Image name
The image to display.
Image class
Optional class names to apply to the image.
Image style
Optional in-line styles to apply to the image.
Bubble help
A popup message shown when the user hovers the mouse over the image.
OnClick
Optional JavaScript that is executed when the user clicks the image. The JavaScript can reference the following variables:
- rowNumber
The zero based row number for the List row the image is in
- listObj
A pointer to the List object
- data
A pointer to current row data values. To read data from a field in the current row use data.fieldName where 'fieldName' is the case-sensitive name of the field. For example:
var firstName = data.firstName;
Stop event propagation
Defines whether or not the click event for the image should be propagated up to the row events for the List (e.g. onSelect, onClick). If checked, the row events do not fire.
This property does not halt event propagation for the onTap event.
Focus row
By default, clicking the image does not select the image's row. If you check this option, clicking the image also selects the List row.
Two-state image
Defines whether or not the image should change when the user taps or clicks the image.
Swapped image name
This property is shown when Two-state image is checked.
An optional image to show when the image state changes. Leave blank if the swapped image is same as initial image.
Toggle on click
This property is shown when Two-state image is checked.
If checked, toggles the displayed image when clicked.
If Toggle on click is unchecked, then the image is only changed when the <listObject>.twoStateImageSet() method is called. For example:
var listObj = {dialog.object}.getControl('MYLIST');
if (listObj) {
// Set the state for the "IMG1" field in the list for all rows to "on":
listObj.twoStateImageSet("IMG1","on")
}Rotation direction
This property is shown when Two-state image is checked.
Specify the rotation direction of the image when it is in its swapped state.
- Direction
- Description
- 90
Rotate image 90 degrees clockwise.
- 180
Rotate image 180 degrees clockwise.
- -90
Rotate image 90 degrees counterclockwise.
- -180
Rotate image 180 degrees counterclockwise.
- none
Do not rotate the image.
Videos
Two-state images
A common design pattern when building user interfaces is to add icons that change with animation when the icon is clicked. For example, you might have a 'hamburger' icon that displays a menu. When the icon is clicked, you might want the icon to animate into an different icon (i.e. an 'X' icon) to indicate clicking the icon closes the menu.
In this video, we show how to create animated two-state images in a List.
See Also